<template>
  <div class="home">
    <div class="header">
      <van-search
        v-model="value"
        @click="search"
        placeholder="请输入搜索关键词"
      />
      <template>
        <van-icon
          name="share-o"
          @click="showShare = true"
          @select="onSelect"
          size="20px"
        />
      </template>
      <van-share-sheet
        v-model="showShare"
        title="立即分享给好友"
        :options="options"
      />
    </div>
    <div class="barray">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item
          v-for="(item, index) in bannerData"
          :key="index"
         
        >
        <div class="pro-img">
          <img :src="item.i"  @click="godetail(item.id)" alt="" />
        </div>
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="activity-title">
      <div class="text">热门活动：</div>
      <div class="activity-more" @click="goactivity">更多</div>
    </div>
    <div class="activity">
      
      <div class="activity-box" v-for="(item , index) in activitydata" :key="index">
        <div>#<span id="span">{{item.name}}</span> </div>
        
      </div>
    </div>
    <div class="hot-title text">热门话题：</div>
    <div class="hotdata">
      <div class="hotbiji" v-for="(item, index) in bijidata" :key="index">
        <div class="hotbiji-img">
          <img :src="item.image" alt="" />
        </div>
        <div class="huati-box">
          <div>{{ item.name }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import ProItem from '../components/ProItem.vue'
export default {
  name: "Home",

  data() {
    return {
      showShare: false,
      options: [
        { name: "微信", icon: "wechat" },
        { name: "微博", icon: "weibo" },
        { name: "复制链接", icon: "link" },
        { name: "分享海报", icon: "poster" },
        { name: "二维码", icon: "qrcode" },
      ],
      hotpro: [],
      hotprodata: [],
      value: "",
      images: [
        "https://img01.yzcdn.cn/vant/apple-1.jpg",
        "https://img01.yzcdn.cn/vant/apple-2.jpg",
      ],
      tabsdata: [
        {
          title: "今日精选",
          content: 1,
        },
      ],
      bannerData: [],
      attactiondata: [],
      bijidata: [],
      activitydata:[]
    };
  },
  components: {},
  created() {
    this.getdetail();
    this.getTabData();
    this.getactivitydata()
  },
  methods: {
    // 活动yemian
    goactivity(){
     this.$router.push({name:'Activity'})

    },

    // 笔记详情
    godbijidetail(id) {
      this.$router.push({ name: "Bijidetail", params: { id } });
    },
    godetail(id) {
      this.$router.push({ name: "Detail", params: { id } });
    },
    search() {
      this.$router.push({ name: "Search" });
    },
    getTabData() {
      this.axios({
        method: "get",
        url: "https://apis.netstart.cn/douguo/home/recommended/20/10",
      })
        .then((res) => {
          this.bannerData = res.data.result.banner;
          this.hotpro = res.data.result.list;
          this.$toast(res.data.result.flt);
          // this.hotpro.forEach(v => {

          // this.hotprodata = v.r
          // console.log("res==>", res);
          //  console.log('this.hotpro==>',this.hotpro.r);
          //  console.log('this.hotprodata==>',this.hotprodata.value);
        })

        .catch((err) => {
          console.log("err==>", err);
        });
    },

    onSelect(option) {
      Toast(option.name);
      this.showShare = false;
    },
    getdetail() {
      this.axios({
        method: "get",
        url: "https://apis.netstart.cn/douguo/note/topiclist/0/20",
      })
        .then((res) => {
          this.bijidata = res.data.result.list;
          // console.log("res==>", res);
        })
        .catch((err) => {
          console.log("err==>", err);
        });
    },
    getactivitydata(){
       this.axios({
        method: "get",
        url: "https://apis.netstart.cn/douguo/home/events/getlists?offset=0limit=20",
      })
        .then((res) => {
          
          this.activitydata = res.data.data.ongoing.events.slice(0,2);

          console.log('this.activitydata==>',this.activitydata);
          console.log("res==>", res);
        })
        .catch((err) => {
          console.log("err==>", err);
        });
    }
  },
};
</script>
<style lang="less" scoped>
.home {
  margin: 0 5px;
  .hotdata {
    column-count: 2;
    column-gap: 10px;
  }
  .hotbiji {
    position: relative;
    break-inside: avoid;
  }
  .hotbiji-img img {
    width: 100%;
  }
  .data-description {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  padding: 20px 0 60px 0;
  /deep/.van-swipe__track {
    height: 130px;
  }
  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    height: 130px;
  }
  .header {
    height: 40px;
    line-height: 55px;
    display: flex;
    padding: 5px 5px;
    justify-content: space-between;
  }
  /deep/.van-field {
    width: 100%;
  }
  /deep/.van-search {
    height: 10px;
    width: 100%;
  }
  /deep/.van-icon-share-o {
    padding: 0 5px;
  }
  .barray {
    width: 100%;
    margin: auto;
    position: relative;
  }
  .tabs {
    margin-top: 20px;
  }
  .tabs-content {
    margin: 15px 0 0 20px;
  }
  /deep/.van-swipe-item img {
    height: 250px;
  }
  .pros {
    display: flex;
    flex-wrap: wrap;
  }
  .pro {
    width: 45%;
    height: 130px;
    background-color: #e43;
    margin: 10px auto;
    border-radius: 10px;
    position: relative;
  }
  .pro-title {
    width: 100%;
    height: 20px;
    background-color: rgba(0, 0, 0, 0.3);
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    position: absolute;
    bottom: 0;
  }
  .pro-img {
    width: 365px;
    height: 110px;
  }

  .pro-img img {
    width: 355px;
    height: 110px;
    border-radius: 10px;
 

  }
  .huati-box {
    background-color: rgba(0,0,0,.3);
    color: #fff;
    font-size: 13px;
    position: absolute;
    bottom: 3px;
    width: 100%;
    letter-spacing: 1.5px;
  }
  .activity{
    width: 100%;
    margin-top: 6px;
    font-size: 13px;
    display: flex;
    flex-direction: row;
}
  #span{
    color: #e43;
    opacity: .7;
    font-size: 14px;
  }
  .activity-title{
  //  margin-top: -105px;
   display: flex;
   justify-content: space-between;
  }
  .activity-more{
     margin-top: 27px;
     margin-right: 5px;
     color: #555;
  }
}
</style>
